<template>
  <a-menu
      v-model:selectedKeys="current"
      v-model:openKeys="openKeys"
      mode="inline"
      :theme="isDarkMode ? 'dark' : 'light'"
      :inline-collapsed="collapsed"
      :items="processedItems"
      @click="doMenuClick"
      class="custom-menu"
  >
    <template #item="{ item, originItemProps }">
      <a-menu-item v-bind="originItemProps">
        <div class="menu-item-content">
          <component
              :is="item.icon.component"
              v-if="item.icon?.component"
              class="menu-icon"
          />
          <span class="menu-text">{{ item.label }}</span>
          <span v-if="item.tag" class="menu-tag">{{ item.tag }}</span>
        </div>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script lang="ts" setup>
import {computed, markRaw, ref, watchEffect} from 'vue';
import { useRouter } from "vue-router";
import { useLoginUserStore } from "@/stores/UseLoginUserStore";
import type { MenuProps } from 'ant-design-vue';
import {
  HomeOutlined,
  UserOutlined,
  FileAddOutlined,
  PictureOutlined,
  DeploymentUnitOutlined,
  ToolOutlined,
  PlusOutlined
} from '@ant-design/icons-vue';

const router = useRouter();
const loginUserStore = useLoginUserStore();
const collapsed = ref(false);
const isDarkMode = ref(false);
const current = ref<string[]>([]);
const openKeys = ref<string[]>([]);
import type { Component } from 'vue';

interface CustomMenuItem {
  key: string;
  label: string;
  icon?: Component;  // 使用Vue的Component类型
  tag?: string;
  children?: CustomMenuItem[];
}

const originItems: CustomMenuItem[] = [
  {
    key: '/home',
    label: '主页',
    icon: markRaw(HomeOutlined)  // 使用markRaw避免不必要的响应式
  },
  {
    key: 'admin-group',
    label: '系统管理',
    icon: ToolOutlined,
    children: [
      { key: '/user/admin', label: '用户管理', icon: UserOutlined },
      { key: '/space/admin', label: '空间管理', icon: DeploymentUnitOutlined },
    ]
  },
  { key: '/add_picture', label: '创建图片', icon: PlusOutlined, tag: 'New' },
  { key: '/picture/admin', label: '图片管理', icon: PictureOutlined },
  { key: '/add_picture/batch', label: '批量抓取', icon: FileAddOutlined },
  { key: '/add_space', label: '创建空间', icon: PlusOutlined },
];

const processedItems = computed<MenuProps['items']>(() => {
  return originItems
      .filter(item => {
        if (item.key === 'admin-group') {
          return loginUserStore.loginUser?.userRole === 'admin';
        }
        return true;
      })
      .map(item => {
        const newItem = { ...item };
        if (newItem.children) {
          newItem.children = newItem.children.filter(child => {
            if (child.key.startsWith('/admin')) {
              return loginUserStore.loginUser?.userRole === 'admin';
            }
            return true;
          });
        }
        return newItem;
      });
});

const doMenuClick = ({ key }: { key: string }) => {
  if (key.startsWith('/')) {
    router.push(key);
    if (window.innerWidth < 992) {
      collapsed.value = true;
    }
  }
};

const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
  localStorage.setItem('theme', isDarkMode.value ? 'dark' : 'light');
};

watchEffect(() => {
  current.value = [router.currentRoute.value.path];
});

const onCollapse = (val: boolean) => {
  collapsed.value = val;
  if (!val) {
    openKeys.value = originItems
        .filter(item => item.children)
        .map(item => item.key);
  }
};

const initTheme = () => {
  const savedTheme = localStorage.getItem('theme') || 'light';
  isDarkMode.value = savedTheme === 'dark';
};
initTheme();
</script>

<style lang="less" scoped>
@import "@/assets/variables.less";

.global-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .logo-wrapper {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s;

    .logo {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }

    .app-name {
      font-size: 18px;
      font-weight: 600;
      color: @primary-color;
      white-space: nowrap;
    }
  }

  .custom-menu {
    border-right: none;
    transition: all 0.3s;

    .menu-item-content {
      display: flex;
      align-items: center;
      width: 100%;
    }

    :deep(.ant-menu-item) {
      display: flex;
      align-items: center;
      height: 48px;
      margin: 8px 0;
      padding: 0 20px !important;
      border-radius: 8px;
      transition: all 0.2s;

      &::after {
        display: none;
      }

      .menu-icon {
        font-size: 16px;
        margin-right: 12px;
      }

      .menu-text {
        flex: 1;
        font-size: 14px;
      }

      .menu-tag {
        background: @primary-color;
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 8px;
      }

      &:hover {
        background: rgba(@primary-color, 0.1) !important;
      }

      &.ant-menu-item-selected {
        background: rgba(@primary-color, 0.1) !important;
        font-weight: 500;
        color: @primary-color !important;

        .menu-icon {
          color: @primary-color;
        }
      }
    }
  }

  .menu-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;

    .theme-toggle {
      color: inherit;
      &:hover {
        color: @primary-color;
      }
    }

    .theme-icon {
      font-size: 18px;
      transition: transform 0.3s;
      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .dark-theme {
    background: #001529;
    color: rgba(255, 255, 255, 0.85);

    .logo-wrapper {
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .custom-menu :deep(.ant-menu-item) {
      color: rgba(255, 255, 255, 0.85);

      &:hover {
        background: rgba(255, 255, 255, 0.1) !important;
      }

      &.ant-menu-item-selected {
        background: rgba(255, 255, 255, 0.1) !important;
        color: @primary-color !important;
      }
    }

    .menu-footer {
      border-top-color: rgba(255, 255, 255, 0.1);
    }
  }

  @media (max-width: 992px) {
    .ant-layout-sider {
      position: fixed !important;
      height: 100vh;
      z-index: 1000;

      &.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
      }
    }
  }
}
</style>
